<template>
    <div>
        <div class="clearfix flexbox spacebetween" style="margin: 10px 0px 10px 10px;">
            <p>游戏类型： 
                <select @change="selchange" v-model="game" style="height: 26px;">
                    <option v-for="(item,index) in gamelist" :key="index" :value="item.value">{{item.name}}</option>
                </select>
            </p>
            <p style="margin-left: 15px;" v-if="game != '六合彩'">日期：<input type="date" v-model="filterdate" @change="changeDate" pattern='yyyy-MM-dd' style="width: 105px;" /></p>
        </div>
        
        <!-- PC蛋蛋 -->
        <x-table class="tableBox" v-if="game == 'PC蛋蛋'">
            <tr class="t_list_caption">
                <th>期数/开奖时间</th>
                <th>开出号码/总和/大小/单双</th>
            </tr>
            <tr class="t_td_text" v-for="(item,index) in infoData" :key="index">
                <td>{{item.period}}<br/>{{item.close}}</td>
                <td v-if="item.results.length == 0">暂未开奖</td>
                <td v-if="item.results.length != 0">
                    <p v-for="(ball,index) in item.balls" :key="index" :class="(ball > 9 ? 'as_' : 'as_0') + ball">{{ball}}</p><br/>
                    <p class="square-icon">{{item.results['和:特码']}}</p>
                    <p class="square-icon" :style="item.results['和:大小'] == '大' ? 'color: red;' : ''">{{item.results['和:大小']}}</p>
                    <p class="square-icon" :style="item.results['和:单双'] == '双' ? 'color: red;' : ''">{{item.results['和:单双']}}</p>
                </td>
            </tr>
        </x-table>

        <!-- 六合彩 -->
        <x-table class="tableBox" v-if="game == '六合彩'">
            <tr class="t_list_caption">
                <th rowspan="2">期数/开奖时间</th>
                <th colspan="7">开出号码</th>
            </tr>
            <tr class="t_list_caption">
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
                <th>特</th>
            </tr>
            <tr class="t_td_text" v-for="(item,index) in infoData" :key="index" style="height: 47px;">
                <td>{{item.period}}<br/>{{item.close}}</td>
                <td v-if="item.results.length == 0" colspan="7">暂未开奖</td>
                <td v-if="item.results.length != 0" v-for="(result,ind) in item.balls" :key="ind"><span :class="rednumber.indexOf(result) != -1? 'redBalls sx_'+result: bluenumber.indexOf(result) != -1? 'blueBalls sx_'+result: 'greenBalls sx_'+result">{{result}}</span><br/>{{item.results['七码:一肖'][ind]}}</td>
            </tr>
        </x-table>

        <!-- 北京PK拾、幸运飞艇 -->
        <x-table class="tableBox" v-if="game == '北京PK拾' || game == '幸运飞艇'">
            <tr class="t_list_caption">
                <th>期数/开奖时间</th>
                <th>开出号码/冠亚军和/1~5龙虎</th>
            </tr>
            <tr class="t_td_text" v-for="(item,index) in infoData" :key="index" style="height: 32px;">
                <td>{{item.period}}<br/>{{item.close}}</td>
                <td v-if="item.results.length == 0">暂未开奖</td>
                <td v-if="item.results.length != 0">
                    <span v-for="(ball,index) in item.balls" :key="index" :class="'bjpk-ranNo-' + ball">{{ball}}</span><br/>
                    <span class="square-icon">{{item.results['冠亚军和:冠亚军和值']}}</span>
                    <span class="square-icon" :style="item.results['冠亚军和:冠亚军和单双'] == '双' ? 'color: red;' : ''">{{item.results['冠亚军和:冠亚军和单双']}}</span>
                    <span class="square-icon" :style="item.results['冠亚军和:冠亚军和大小'] == '大' ? 'color: red;' : ''">{{item.results['冠亚军和:冠亚军和大小']}}</span>
                    <span class="square-icon" :style="item.results['冠军:龙虎'] == '龙' ? 'color: red;' : ''">{{item.results['冠军:龙虎']}}</span>
                    <span class="square-icon" :style="item.results['亚军:龙虎'] == '龙' ? 'color: red;' : ''">{{item.results['亚军:龙虎']}}</span>
                    <span class="square-icon" :style="item.results['第三名:龙虎'] == '龙' ? 'color: red;' : ''">{{item.results['第三名:龙虎']}}</span>
                    <span class="square-icon" :style="item.results['第四名:龙虎'] == '龙' ? 'color: red;' : ''">{{item.results['第四名:龙虎']}}</span>
                    <span class="square-icon" :style="item.results['第五名:龙虎'] == '龙' ? 'color: red;' : ''">{{item.results['第五名:龙虎']}}</span>
                </td>
            </tr>
        </x-table>

        <!-- 北京快乐8 -->
        <x-table class="tableBox" v-if="game == '北京快乐8'">
            <tr class="t_list_caption">
                <th>期数/开奖时间</th>
                <th width="240">开出号码/总和/比数量</th>
            </tr>
            <tr class="t_td_text" v-for="(item,index) in infoData" :key="index" style="height: 67px;">
                <td>{{item.period}}<br/>{{item.close}}</td>
                <td v-if="item.results.length == 0" colspan="7">暂未开奖</td>
                <td v-if="item.results.length != 0" style="padding: 5px 0px 0px;">
                    <span v-for="(ball,index) in item.balls" :key="index" :class="(ball > 9 ? 'as_' : 'as_0') + ball" v-if="index != 20">{{ball}}</span><br/>
                    <p class="square-icon">{{totalList[index]}}</p>
                    <p class="square-icon" :style="item.results['总和:大小'] == '大' ? 'color: red;' : 'color: #2836f4;'">{{item.results['总和:大小']}}</p>
                    <p class="square-icon" :style="item.results['总和:单双'] == '双' ? 'color: red;' : 'color: #2836f4;'">{{item.results['总和:单双']}}</p>
                    <p class="square-icon">{{item.results['总和:五行']}}</p>
                    <p class="square-icon" :style="item.results['个数:前后和'] == '前' ? 'color: red;' : item.results['个数:前后和'] == '后' ? 'color: #2836f4;':''">{{item.results['个数:前后和']}}<span v-if="item.results['个数:前后和'] != '和'" style="font-size: 12px;">(多)</span></p>
                    <p class="square-icon" :style="item.results['个数:单双和'] == '龙' ? 'color: red;' : ''">{{item.results['个数:单双和']}}</p>
                </td>
            </tr>
        </x-table>

        <!-- 天津时时彩、新疆时时彩、重庆时时彩 -->
        <x-table class="tableBox" v-if="game == '天津时时彩' || game == '新疆时时彩' || game == '重庆时时彩'">
            <tr class="t_list_caption">
                <th>期数/开奖时间</th>
                <th>开出号码/总和/龙虎/前三/中三/后三</th>
            </tr>
            <tr class="t_td_text" v-for="(item,index) in infoData" :key="index" style="height: 35px;">
                <td>{{item.period}}<br/>{{item.close}}</td>
                <td v-if="item.results.length == 0">暂未开奖</td>
                <td v-if="item.results.length != 0">
                    <span v-for="(ball,index) in item.balls" :key="index" :class="(ball > 9 ? 'as_' : 'as_0') + ball">{{ball}}</span><br/>
                    <p class="square-icon">{{totalList[index]}}</p>
                    <p class="square-icon" :style="item.results['总和:总和大小'] == '大' ? 'color: red;' : ''">{{item.results['总和:总和大小']}}</p>
                    <p class="square-icon" :style="item.results['总和:总和单双'] == '双' ? 'color: red;' : ''">{{item.results['总和:总和单双']}}</p>
                    <p class="square-icon" :style="item.results['龙虎和:龙虎和'] == '龙' ? 'color: red;' : item.results['龙虎和:龙虎和'] == '虎' ? 'color: #2836f4;':''">{{item.results['龙虎和:龙虎和']}}</p>
                    <p class="square-icon">{{item.results['前三:半顺'] ? '半顺' : item.results['前三:对子'] ? '对子' : item.results['前三:杂六'] ? '杂六' : item.results['前三:豹子'] ? '豹子' : item.results['前三:顺子'] ? '顺子' : '' }}</p>
                    <p class="square-icon">{{item.results['中三:半顺'] ? '半顺' : item.results['中三:对子'] ? '对子' : item.results['中三:杂六'] ? '杂六' : item.results['中三:豹子'] ? '豹子' : item.results['中三:顺子'] ? '顺子' : '' }}</p>
                    <p class="square-icon">{{item.results['后三:半顺'] ? '半顺' : item.results['后三:对子'] ? '对子' : item.results['后三:杂六'] ? '杂六' : item.results['后三:豹子'] ? '豹子' : item.results['后三:顺子'] ? '顺子' : '' }}</p>
                </td>
            </tr>
        </x-table>

        <!-- 安徽快3、江苏快3 -->
        <x-table class="tableBox" v-if="game == '安徽快3' || game == '江苏快3'">
            <tr class="t_list_caption">
                <td>期数/开奖时间</td>
                <td>开出号码/总和</td>
            </tr>
            <tr class="t_td_text" v-for="(item,index) in infoData" :key="index" style="height: 35px;">
                <td>{{item.period}}<br/>{{item.close}}</td>
                <td v-if="item.results.length == 0" colspan="5">暂未开奖</td>
                <td v-if="item.results.length != 0">
                    <span v-for="(ball,index) in item.balls" :key="index" :class="'jsk' + ball"></span><br/>
                    <p class="square-icon">{{item.results['和数:点数']}}</p>
                    <p class="square-icon" :style="item.results['和数:大小'] == '大' ? 'color: red;' : ''">{{item.results['和数:大小'] ? item.results['和数:大小'] : '豹子'}}</p>
                </td>
            </tr>
        </x-table>

        <!-- 山东11选5、广东11选5、江西11选5 -->
        <x-table class="tableBox" v-if="game == '山东11选5' || game == '广东11选5' || game == '江西11选5'">
            <tr class="t_list_caption">
                <th>期数/开奖时间</th>
                <th>开出号码/总和/龙虎</th>
            </tr>
            <tr class="t_td_text" v-for="(item,index) in infoData" :key="index" style="height: 35px;">
                <td>{{item.period}}<br/>{{item.close}}</td>
                <td v-if="item.results.length == 0">暂未开奖</td>
                <td v-if="item.results.length != 0">
                    <span v-for="(ball,index) in item.balls" :key="index" :class="(ball > 9 ? 'as_' : 'as_0') + ball">{{ball}}</span><br/>
                    <p class="square-icon">{{totalList[index]}}</p>
                    <p class="square-icon" :style="item.results['总和:总和大小'] == '大' ? 'color: red;' : ''">{{item.results['总和:总和大小']}}</p>
                    <p class="square-icon" :style="item.results['总和:总和单双'] == '双' ? 'color: red;' : ''">{{item.results['总和:总和单双']}}</p>
                    <p class="square-icon" :style="item.results['总和:总和尾大小'] == '大' ? 'color: red;' : ''">尾{{item.results['总和:总和尾大小']}}</p>
                    <p class="square-icon" :style="item.results['第一球:龙虎'] == '龙' ? 'color: red;' : ''">{{item.results['第一球:龙虎']}}</p>
                </td>
            </tr>
        </x-table>

        <!-- 广东快乐十分、重庆幸运农场 -->
        <x-table class="tableBox" v-if="game == '广东快乐十分' || game == '重庆幸运农场'">
            <tr class="t_list_caption">
                <th>期数/开奖时间</th>
                <th>开出号码/总和/1~4龙虎</th>
            </tr>
            <tr class="t_td_text" v-for="(item,index) in infoData" :key="index" style="height: 35px;">
                <td>{{item.period}}<br/>{{item.close}}</td>
                <td v-if="item.results.length == 0">暂未开奖</td>
                <td v-if="item.results.length != 0">
                    <span v-for="(ball,index) in item.balls" :key="index" :class="'as_' + ball">{{ball}}</span><br/>
                    <p class="square-icon">{{totalList[index]}}</p>
                    <p class="square-icon" :style="item.results['总和:总和大小'] == '大' ? 'color: red;' : ''">{{item.results['总和:总和大小']}}</p>
                    <p class="square-icon" :style="item.results['总和:总和单双'] == '双' ? 'color: red;' : ''">{{item.results['总和:总和单双']}}</p>
                    <p class="square-icon" :style="item.results['总和:总和尾数大小'] == '大' ? 'color: red;' : ''">尾{{item.results['总和:总和尾数大小']}}</p>
                    <p class="square-icon" :style="item.results['第一球:龙虎'] == '龙' ? 'color: red;' : ''">{{item.results['第一球:龙虎']}}</p>
                    <p class="square-icon" :style="item.results['第二球:龙虎'] == '龙' ? 'color: red;' : ''">{{item.results['第二球:龙虎']}}</p>
                    <p class="square-icon" :style="item.results['第三球:龙虎'] == '龙' ? 'color: red;' : ''">{{item.results['第三球:龙虎']}}</p>
                    <p class="square-icon" :style="item.results['第四球:龙虎'] == '龙' ? 'color: red;' : ''">{{item.results['第四球:龙虎']}}</p>
                </td>
            </tr>
        </x-table>
    </div>
</template>
<style scoped>
    .tableBox{
        background-color: #fff;
        text-align: center;
        width: 100%;
    }
    .tableBox th{
        background: #e2d4ca;
        border-bottom: 1px solid #c3b1a4;
        border-top: 1px solid #ebe1d9;
        font-size: 12px;
        line-height: 22px;
        font-weight: bold;
    }
    .tableBox tr{
        font-size: 12px;
        line-height: 22px;
    }
    .tdBg{
        background: #f6f1ee;
        padding: 3px 8px;
        font-size: 12px;
    }
    .marginright{
        margin-right: 20px;
    }
    .marginright>i{
        font-style: normal;
    }
    .lineT{
        border-top: 1px solid #dcd1ca;
    }
</style>
<script>

    import axios from 'axios'
    import {lotterytype} from '../../../../assets/js/lotterytype.js'
    import { XTable } from 'vux'

    export default {
        name: "LotteryResults",
        props: {  //普通类型：String、Number、Boolean、Null    引用类型： Array、Object
            
        },
        components: {
            XTable
        },
        data(){
            return{
                infoData: {},
                gamelist: [
                    {name: 'PC蛋蛋' , value: 'PC蛋蛋'},
                    {name: '六合彩' , value: '六合彩'},
                    {name: '北京PK拾' , value: '北京PK拾'},
                    {name: '北京快乐8' , value: '北京快乐8'},
                    {name: '天津时时彩' , value: '天津时时彩'},
                    {name: '安徽快3' , value: '安徽快3'},
                    {name: '山东11选5' , value: '山东11选5'},
                    {name: '幸运飞艇' , value: '幸运飞艇'},
                    {name: '广东11选5' , value: '广东11选5'},
                    {name: '广东快乐十分' , value: '广东快乐十分'},
                    {name: '新疆时时彩' , value: '新疆时时彩'},
                    {name: '江苏快3' , value: '江苏快3'},
                    {name: '江西11选5' , value: '江西11选5'},
                    {name: '重庆幸运农场' , value: '重庆幸运农场'},
                    {name: '重庆时时彩' , value: '重庆时时彩'},
                ],
                game: 'PC蛋蛋',  //游戏
                params: '',
                filterdate: '',
                rednumber: ['01','02','07','08','12','13','18','19','23','24','29','30','34','35','40','45','46'],
                bluenumber: ['03','04','09','10','14','15','20','25','26','31','36','37','41','42','47','48'],
                greennumber: ['05','06','11','16','17','21','22','27','28','32','33','38','39','43','44','49'],
                totalList: [],
            }
        },
        computed: {
            
        },
        methods: {
            paramsFun(){
                //默认日期  今天
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                if (month < 10) {
                    month = "0" + month;
                }
                if (day < 10) {
                    day = "0" + day;
                }
                var nowDate = year + "-" + month + "-" + day;

                this.filterdate = nowDate;
            },
            init(){

                //当前标题
                this.$emit('getTit','开奖结果');

                var _this = this;
                if(window.localStorage.Authorizations){

                    this.$httpGet('/api/game/moreResults/'+ this.game + '/' + this.filterdate.substr(0,4) + this.filterdate.substr(5,2) + this.filterdate.substr(8,2)).then(response => {
                        
                        if(response.status == 200){

                            _this.infoData = response.data;
                            _this.totalList = [];
                            if(_this.game == '六合彩' || _this.game == '北京快乐8' || _this.game == '天津时时彩' || _this.game == '新疆时时彩' || _this.game == '重庆时时彩' || _this.game == '山东11选5' || _this.game == '广东11选5' || _this.game == '江西11选5' || _this.game == '广东快乐十分' || _this.game == '重庆幸运农场'){
                                for(var i = 0; i<_this.infoData.length; i++){
                                    //计算总数
                                    if(_this.infoData[i].balls){
                                        var total = 0;
                                        for(var j = 0; j<_this.infoData[i].balls.length; j++){
                                            total += parseInt(_this.infoData[i].balls[j]);
                                        }
                                        _this.totalList.push(total);
                                    }else{
                                        _this.totalList.push(0);
                                    }
                                    //时间戳转日期
                                    var date = new Date(parseInt(_this.infoData[i].close) * 1000);
                                    var Y = date.getFullYear();
                                    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
                                    var D = date.getDate();
                                    var h = date.getHours();
                                    var m = date.getMinutes();
                                    var s = date.getSeconds();
                                    _this.infoData[i].close = Y + '-' + M + '-' + _this.add0(D) + ' ' + _this.add0(h) + ':' + _this.add0(m) + ':' + _this.add0(s);
                                }
                            }else if(_this.game == 'PC蛋蛋' || _this.game == '北京PK拾' || _this.game == '幸运飞艇' || _this.game == '安徽快3' || _this.game == '江苏快3'){

                                for(var i = 0; i<_this.infoData.length; i++){
                                    //时间戳转日期
                                    var date = new Date(parseInt(_this.infoData[i].close) * 1000);
                                    var Y = date.getFullYear();
                                    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
                                    var D = date.getDate();
                                    var h = date.getHours();
                                    var m = date.getMinutes();
                                    var s = date.getSeconds();
                                    _this.infoData[i].close = Y + '-' + M + '-' + _this.add0(D) + ' ' + _this.add0(h) + ':' + _this.add0(m) + ':' + _this.add0(s);
                                }
                            }
                        }

                    });
                }
                

            },
            //add 0
            add0(num){
                if(num < 10){
                    num = '0'+num;
                }
                return num;
            },
            //切换游戏
            selchange(event){
                
                this.game = event.target.value;
                this.init();
            },
            //change  日期
            changeDate(){
                this.init();
            },
            
        },
        mounted(){
            this.paramsFun();
            this.init();
        },
        watch: {
            openBet: function(now,old){
                // console.log(now,old);
                //开奖  刷新路珠数据
                this.init();
                
            },
            ninetime: function(now,old){
                console.log('------------90s  账户信息');
                //90s  刷新数据
                this.init();
            },

        },
    }
</script>
